<!DOCTYPE html>
<html>
<head>
    <title>Physics Pendulum Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="450"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters and Constants
    const O = { x: 250, y: 80 }; // Pivot point
    const l = 180; // Length of the rope in pixels
    const theta = 30 * Math.PI / 180; // 30 degrees in radians
    const ballRadius = 9;
    const angleArcRadius = 40;

    // Calculate coordinates of key points.
    // Angles are measured clockwise from the positive x-axis (horizontal right).
    // A is at 0 degrees.
    const A = { x: O.x + l, y: O.y };
    // C is at 90 degrees (vertical down).
    const C = { x: O.x, y: O.y + l };
    // B is at angle theta from horizontal.
    const B = { x: O.x + l * Math.cos(theta), y: O.y + l * Math.sin(theta) };
    // D is at angle theta from vertical.
    const D_angle = Math.PI / 2 + theta;
    const D = { x: O.x + l * Math.cos(D_angle), y: O.y + l * Math.sin(D_angle) };

    // --- Drawing Functions ---

    // Function to draw a dashed line
    function drawDashedLine(x1, y1, x2, y2) {
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.restore();
    }

    // --- Start Drawing ---

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 1. Draw the main circular path arc
    // The arc in the source image extends from A to a point symmetric to B.
    const startAngle = 0; // Point A
    const endAngle = Math.PI - theta; // Point symmetric to B
    ctx.beginPath();
    ctx.arc(O.x, O.y, l, startAngle, endAngle);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();

    // 2. Draw lines from the pivot O
    // Solid line OA
    ctx.beginPath();
    ctx.moveTo(O.x, O.y);
    ctx.lineTo(A.x, A.y);
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // Dashed helper lines
    drawDashedLine(O.x, O.y, B.x, B.y); // OB
    drawDashedLine(O.x, O.y, C.x, C.y); // OC
    drawDashedLine(O.x, O.y, D.x, D.y); // OD

    // 3. Draw the angle indicators
    ctx.lineWidth = 1;
    // Angle between OA and OB
    ctx.beginPath();
    ctx.arc(O.x, O.y, angleArcRadius, 0, theta);
    ctx.stroke();
    
    // Angle between OC and OD
    ctx.beginPath();
    ctx.arc(O.x, O.y, angleArcRadius, Math.PI / 2, D_angle);
    ctx.stroke();

    // 4. Draw the ball (mass m) at point A
    ctx.beginPath();
    ctx.arc(A.x, A.y, ballRadius, 0, 2 * Math.PI);
    ctx.fillStyle = 'gray';
    ctx.fill();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // 5. Add all text labels
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Labels for points
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('O', O.x - 18, O.y);
    ctx.fillText('A', A.x + 15, A.y + 3);
    ctx.fillText('B', B.x + 15, B.y + 5);
    ctx.fillText('C', C.x - 2, C.y + 18);
    ctx.fillText('D', D.x - 20, D.y);

    // Labels for physical quantities
    ctx.fillText('m', A.x - 20, A.y - 18);
    ctx.fillText('l', O.x + l / 2, O.y - 15);

    // Labels for angles (θ)
    const theta1_angle_mid = theta / 2;
    ctx.fillText('θ', O.x + (angleArcRadius + 12) * Math.cos(theta1_angle_mid), O.y + (angleArcRadius + 12) * Math.sin(theta1_angle_mid));
    
    const theta2_angle_mid = (Math.PI / 2 + D_angle) / 2;
    ctx.fillText('θ', O.x + (angleArcRadius + 10) * Math.cos(theta2_angle_mid), O.y + (angleArcRadius + 10) * Math.sin(theta2_angle_mid));

    // 6. Add the diagram title text
    ctx.font = '22px "SimSun", "Songti SC"';
    ctx.fillText('习题 2-18 图', canvas.width / 2, C.y + 50);

</script>

</body>
</html>